<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const { ref, watch,reactive,watchEffect } = Vue
    const app = Vue.createApp({
        template: `
        firstname:<input v-model="firstname" /><br>
        lastname:<input v-model="lastname" /><br>
        fullname:<input v-model="fullname" /><br>
        名字:<input v-model="job.name" /><br>
        薪水:<input v-model="job.type.salary" /><br>
        `,

        /*   data() {
              return {
                  firstname:'张',
                  lastname:'三',  
                  fullname:'张三',
              }
          }, */
        //监听单个数据
        /* watch: {
            firstname(newVal,oldVal){
                console.log('当前值 ', newVal, "之前值 ", oldVal);
                //fullname.value = firstname.value + lastname.value;
            }
        }, */
        setup(props) {
            let fullname = ref('');
            let lastname = ref('三')
            let firstname = ref('张')
            let job = reactive({name:'Eric',type:{salary:'30k'}})
             /* watch(firstname, function (newVal, oldVal) {
                console.log('当前值 ', newVal, "之前值 -", oldVal);
                fullname.value = firstname.value + lastname.value;
            })  */
           /*  //
           1，watch需要指定监听对象
           2.多个参数，第一个参数时监听对象，第二个参数是回调函数，第三个参数可选，配置immediate
           3.默认关闭immediate
           */

           /*  watch([() => job.name,() =>job.type], function (newVal, oldVal) {
                console.log('当前值 ', newVal, "之前值 ", oldVal);
            },{immediate:true,deep:true}) */
            /*
            1，不需要指定监听对象
            2.只有一个参数
            3.它的监听对象就是在函数中引用的数据
            4.默认开启immediate立即侦听
            */
            watchEffect(function(){
                console.log('watchEffect.......');
                fullname.value = firstname.value + lastname.value;
            })
            return{firstname,lastname,fullname,job};
        }
      
    })

    //监听多个数据



    const vm = app.mount("#app")
</script>

</html>